<template>
    <div>
        <!-- <navbar-component></navbar-component> -->
        <main>
            <section class="absolute w-full h-full">
                <div
                    :style="{
                        'background-image':
                            'url(static/images/login_background.png)',
                    }"
                    class="absolute top-0 w-full h-full bg-gray-900"
                    style="background-size: 100%; background-repeat: no-repeat"
                ></div>
                <div class="container mx-auto px-4 h-full">
                    <div class="flex  content-center items-center justify-center  h-full">
                        <div class="w-full lg:w-4/12 px-4">
                            <div
                                class="
                                    relative
                                    flex flex-col
                                    min-w-0
                                    break-words
                                    w-full
                                    mb-6
                                    shadow-lg
                                    rounded-lg
                                    bg-gray-300
                                    border-0
                                "
                            >
                                <div class="rounded-t mb-0 px-6 py-6">
                                    <div class="text-center mb-3">
                                        <h6
                                            class="
                                                text-gray-600 text-xl
                                                font-bold
                                            "
                                        >
                                            用户登录
                                        </h6>
                                    </div>

                                    <hr
                                        class="mt-6 border-b-1 border-gray-400"
                                    />
                                </div>
                                <div class="flex-auto px-4 lg:px-10 py-10 pt-0">
                                    <div
                                        class="
                                            text-gray-500 text-center
                                            mb-3
                                            font-bold
                                        "
                                    ></div>
                                    <form>
                                        <div class="relative w-full mb-3">
                                            <label
                                                class="
                                                    block
                                                    uppercase
                                                    text-gray-700 text-xs
                                                    font-bold
                                                    mb-2
                                                "
                                            >手机号</label
                                            ><input
                                            v-model="form.mobile"
                                            class="
                                                    border-0
                                                    px-3
                                                    py-3
                                                    placeholder-gray-400
                                                    text-gray-700
                                                    bg-white
                                                    rounded
                                                    text-sm
                                                    shadow
                                                    focus:outline-none
                                                    focus:ring
                                                    w-full
                                                "
                                            placeholder="手机号"
                                            style="
                                                    transition: all 0.15s ease
                                                        0s;
                                                "
                                            type="text"
                                        />
                                        </div>
                                        <div class="relative w-full mb-3">
                                            <label
                                                class="
                                                    block
                                                    uppercase
                                                    text-gray-700 text-xs
                                                    font-bold
                                                    mb-2
                                                "
                                            >密码</label><input
                                            v-model="form.password"
                                            class="
                                                    border-0
                                                    px-3
                                                    py-3
                                                    placeholder-gray-400
                                                    text-gray-700
                                                    bg-white
                                                    rounded
                                                    text-sm
                                                    shadow
                                                    focus:outline-none
                                                    focus:ring
                                                    w-full
                                                "
                                            placeholder="密码"
                                            style="
                                                    transition: all 0.15s ease
                                                        0s;
                                                "
                                            type="password"
                                        />
                                        </div>
                                        <hd-captcha></hd-captcha>
                                        <div class="text-center mt-6">
                                            <button class="bg-gray-900 text-white  active:bg-gray-700  text-sm
                                                    font-bold
                                                    uppercase
                                                    px-6
                                                    py-3
                                                    rounded
                                                    shadow
                                                    hover:shadow-lg
                                                    outline-none
                                                    focus:outline-none
                                                    mr-1
                                                    mb-1
                                                    w-full
                                                "
                                                    style="  transition: all 0.15s ease 0s;  "
                                                    type="button"
                                                    @click="submit"
                                            >
                                                登录
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <footer class="absolute w-full bottom-0 bg-gray-900 pb-6">
                    <div class="container mx-auto px-4">
                        <hr class="mb-6 border-b-1 border-gray-700"/>
                        <div
                            class="
                    flex flex-wrap
                    items-center
                    md:justify-between
                    justify-center
                "
                        >
                            <div class="w-full md:w-4/12 px-4">
                                <div class="text-sm text-white font-semibold py-1">
                                    Copyright © {{ date }}
                                    <a
                                        class="
                                text-white
                                hover:text-gray-400
                                text-sm
                                font-semibold
                                py-1
                            "
                                        href="#"
                                    >开源后台管理系统</a
                                    >
                                </div>
                            </div>
                        </div>
                    </div>
                </footer>
            </section>
        </main>
    </div>
</template>
<script>
export default {
    route: {path: '/login', meta: {guest: true}},
    data() {
        return {
            form: {},
            date: new Date().getFullYear(),
        }
    },
    methods: {
        async submit() {
            const {token} = await this.axios.post('user/login', this.form)
            localStorage.setItem('token', token)
            location.href = '/admin';
        }
    }
}
</script>
